<template>
  <div style="width: 100%; padding: 20px 0; background: #fff">
    <el-empty :image-size="200" v-if="props.dataList.length <= 0" />
    <div
      v-else
      class="card"
      v-for="community of props.dataList"
      :key="community.id"
      @click="toDetail(community.id)"
    >
      <div style="height: 30px; line-height: 30px; display: flex">
        <div class="tag">问</div>
        <div style="color: #0051ff">{{ titleUtil.delHtmlStyle(community?.content) }}</div>
      </div>
      <div style="display: flex; width: 100%; justify-content: space-between">
        <div
          style="margin-left: 45px; margin-top: 10px; display: flex; flex-wrap: wrap; width: 80%"
        >
          <div class="label" v-for="tag of community.tagList" :key="tag.id">{{ tag.name }}</div>
        </div>
        <div class="time">编辑于{{ titleUtil.formatDateToYYYYMMDD(community.createTime) }}</div>
      </div>
      <div style="margin-top: 10px" v-if="community.reviewCount > 0">
        <div style="height: 30px; line-height: 30px; display: flex">
          <div class="tag1">答</div>
          <div style="color: #626262">{{ community.buser?.nickname }}</div>
        </div>
        <div
          style="margin: 10px 0 10px 45px"
          v-html="community.review?.communityReviewContent"
        ></div>
      </div>
      <div class="line" />
      <div class="foot">
        <div style="margin-left: 45px" v-if="community.reviewCount <= 0" class="reply">
          成为首答用户吧
        </div>
        <div style="margin-left: 45px" v-else class="reply">
          {{ community.reviewCount }}人回答了此问题
        </div>
        <div class="reply">
          <el-icon><Edit /></el-icon>写回答
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { marked } from 'marked'
import { useRouter } from 'vue-router'

const props = defineProps({
  dataList: {
    type: Array,
    default: () => {}
  }
})
const router = useRouter()

const toDetail = (id) => {
  router.push({
    name: 'CommunityDetail',
    params: {
      id: id
    }
  })
}
</script>

<style scoped>
.card {
  width: 90%;
  margin-left: 5%;
  padding: 10px;
  background: #eee;
  margin-bottom: 20px;
  border-radius: 3px;
}
.tag {
  width: 30px;
  margin-right: 15px;
  background: #0051ff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}
.tag1 {
  width: 30px;
  margin-right: 15px;
  background: #ffffff;
  color: #0051ff;
  text-align: center;
  border-radius: 5px;
}
.line {
  margin: 20px 0 20px 45px;
  border: 1px #e3e3e3 solid;
}
.reply:hover {
  color: #0051ff;
}
.label {
  border: 1px #5a5a5a solid;
  padding: 2px 10px;
  width: fit-content;
  font-size: 12px;
  color: #626262;
  border-radius: 2px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.label:hover {
  color: #0051ff;
  border: #0051ff 1px solid;
  background: rgba(175, 203, 255, 0.4);
}
.card:hover {
  background: rgba(175, 203, 255, 0.2);
  cursor: pointer;
}
.time {
  margin-top: 10px;
  font-size: 12px;
  color: #626262;
}
.foot {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  color: #626262;
}
</style>
